<template>
  <!-- 高级检索  start -->
  <div>

    <!-- {{ disabledType }} //判断是否禁用 -->
    <!-- SHOWTYPE 1=整数,2=浮点,3=日期,4=文本,5=下拉,6=图像,7=部门（单选）,8=人员（单选）,9=文本域 -->
    <!--IS_QUERY  查询模式0=不参加查询,1=精确查询,2=模糊查询,3=左匹配查询,4=区间查询,5=列表查询,6=单选对话框,7=多选对话框 -->
    <!-- typeInput==true  修改著录显示  typeInput=其余参数   列表input搜索显示 -->
    <!--         {{ item }}{{ typeInput }}{{ typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 240px' }}-->

    <el-input v-if="item.SHOWTYPE == 1" v-model="queryParams[item.FIELD_NAME]" type="number"
      oninput="if(value.length>10)value=value.slice(0,10);if(value<0)value=0" placeholder="" clearable :style="style"
      @keyup.enter.native="handleQuery" @change="onChangeTap" :disabled="disabledType" />

    <el-input v-else-if="item.SHOWTYPE == 2" v-model="queryParams[item.FIELD_NAME]" type="number" placeholder=""
      @input="queryParams[item.FIELD_NAME] = queryParams[item.FIELD_NAME].replace(/^(0+)|[^\d]+/g, '')" clearable
      :style="style" @keyup.enter.native="handleQuery" @change="onChangeTap" :disabled="disabledType" :maxlength="10" />
    <!--   区间查询   而且还是个日期 -->
    <template v-else-if="item.SHOWTYPE == 3 && item.IS_QUERY == 4">
      <div v-if="dictList.length > 0">
        <div v-if="dictList[0].dictValue == 'yyyy'">
          <div v-if="inputType == 1">
            <el-date-picker v-model="queryParams[item.FIELD_NAME + '_start']" :style="style" type="year" format="yyyy"
              :value-format="dictList[0].dictValue" placeholder="选择开始年度" @change="onChangeTapND($event, item.FIELD_NAME)"
              :disabled="disabledType">
            </el-date-picker><span style="margin:0 10px">-</span>
            <el-date-picker v-if="dictList[0].dictValue == 'yyyy'" v-model="queryParams[item.FIELD_NAME + '_end']"
              :style="style" type="year" format="yyyy" :value-format="dictList[0].dictValue" placeholder="选择结束年度"
              @change="onChangeTapND($event, item.FIELD_NAME)" :disabled="disabledType">
            </el-date-picker>
          </div>
          <div v-else>
            <el-date-picker v-if="dictList[0].dictValue == 'yyyy'" v-model="queryParams[item.FIELD_NAME]" :style="style"
              type="year" format="yyyy" :value-format="dictList[0].dictValue" placeholder="选择年度" @change="onChangeTap"
              :disabled="disabledType" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div>
        <!-- <el-date-picker v-else-if="dictList[0].dictValue == 'yyyy-MM-dd HH:mm:ss'"
            v-model="queryParams[item.FIELD_NAME]" type="datetime" placeholder="选择日期时间"
            :value-format="dictList[0].dictValue" :disabled="disabledType">
        </el-date-picker> -->
        <!-- inputType==1   查询列表显示开始日期和结束日期-->
        <div v-else-if="dictList[0].dictValue == 'yyyyMMdd'">
          <el-date-picker v-model="queryParams[item.FIELD_NAME]" :style="style" type="daterange" range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" @change="onChangeTap" v-if="inputType == 1"
            :disabled="disabledType" format="yyyy-MM-dd" :value-format="dictList[0].dictValue"></el-date-picker>
          <el-date-picker v-else v-model="queryParams[item.FIELD_NAME]" style="width: 100%" type="date"
            format="yyyy-MM-dd" :value-format="dictList[0].dictValue" placeholder="选择日期" @change="onChangeTap"
            :disabled="disabledType">
          </el-date-picker>
        </div>
      </div>
    </template>
    <!--   不是区间查询   而且还是个日期 -->
    <template v-else-if="item.SHOWTYPE == 3 && item.IS_QUERY != 4">
      <div v-if="dictList.length > 0">
        <el-date-picker v-if="dictList[0].dictValue == 'yyyy'" v-model="queryParams[item.FIELD_NAME]" :style="style"
          type="year" format="yyyy" :value-format="dictList[0].dictValue" placeholder="选择年度" @change="onChangeTap"
          :disabled="disabledType" :picker-options="pickerOptions">
        </el-date-picker>
        <!-- <el-date-picker v-else-if="dictList[0].dictValue == 'yyyy-MM-dd HH:mm:ss'"
            v-model="queryParams[item.FIELD_NAME]" type="datetime" placeholder="选择日期时间"
            :value-format="dictList[0].dictValue" :disabled="disabledType">
        </el-date-picker> -->
        <div v-else-if="dictList[0].dictValue == 'yyyyMMdd'">
          <el-date-picker v-model="queryParams[item.FIELD_NAME]" :style="style" type="date" format="yyyy-MM-dd"
            :value-format="dictList[0].dictValue" placeholder="选择日期" @change="onChangeTap" :disabled="disabledType">
          </el-date-picker>
        </div>
      </div>
    </template>
    <el-input v-else-if="item.SHOWTYPE == 4" v-model="queryParams[item.FIELD_NAME]" placeholder="" clearable
      :style="style" @keyup.enter.native="handleQuery" @change="onChangeTap" :disabled="disabledType" />
    <div v-else-if="item.SHOWTYPE == 5">
    
      <template v-if="sourceType == '1'">
        <el-select v-model="queryParams[item.FIELD_NAME]" placeholder="请选择" :style="style" @change="onChangeTap" @keyup.enter.native="handleQuery"
          :disabled="disabledType">
          <el-option v-for="i in dictList" :key="i.dictValue" :label="i.dictLabel" :value="i.dictLabel">
          </el-option>
        </el-select>
      </template>
      <template v-else>
        <el-select v-model="queryParams[item.FIELD_NAME]" placeholder="请选择" :style="style" @change="onChangeTap" @keyup.enter.native="handleQuery"
          :disabled="disabledType">
          <el-option v-for="i in dictList" :key="i.dictValue" :label="i.dictLabel" :value="i.dictValue">
          </el-option>
        </el-select>
      </template>
    </div>
    <div v-else-if="item.SHOWTYPE == 7">
      <template>
        <treeselect v-if="isType == 'senior'"  v-model="queryParams[item.FIELD_NAME + '_ID']"
          :options="optionSelect" label placeholder="请选择" :appendToBody="true" @open="handleOpen" @keyup.enter.native="handleQuery"
          @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType"
          @input="treeSelectInput($event, item.FIELD_NAME)"  :style="style"  :normalizer="normalizer"/>
        <treeselect v-else :style="style" v-model="queryParams[item.FIELD_NAME + '_ID']" :options="optionSelect" label
          placeholder="请选择" @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType" @keyup.enter.native="handleQuery"
          @input="treeSelectInput($event, item.FIELD_NAME)" :normalizer="normalizer"/>
      </template>
    </div>
    <div v-if="item.SHOWTYPE == 8">
      <template>
        <treeselect v-if="isType == 'senior'" :style="style" v-model="queryParams[item.FIELD_NAME + '_ID']" @keyup.enter.native="handleQuery"
          :options="userTreeList" label placeholder="请选择"  :disable-branch-nodes="true" :appendToBody="true"  @open="handleOpen"
          @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType"
          @input="treeSelectInput($event, item.FIELD_NAME)" :normalizer="normalizer" />
        <treeselect v-else :style="style" v-model="queryParams[item.FIELD_NAME + '_ID']" :options="userTreeList" label
          placeholder="请选择" :disable-branch-nodes="true" @select="onChangeTap1($event, item.FIELD_NAME)" @keyup.enter.native="handleQuery"
          :disabled="disabledType" @input="treeSelectInput($event, item.FIELD_NAME)"  :normalizer="normalizer"/>
      </template>

    </div>
    <div v-if="item.SHOWTYPE == 10">
      <template>
        <treeselect v-if="isType == 'senior'" :style="style" v-model="queryParams[item.FIELD_NAME + '_ID']" @keyup.enter.native="handleQuery"
          :options="specialityTreeList" label placeholder="请选择" :disable-branch-nodes="true" :appendToBody="true"  @open="handleOpen"
          @select="onChangeTap1($event, item.FIELD_NAME)" :disabled="disabledType"
          @input="treeSelectInput1($event, item.FIELD_NAME)"  :normalizer="normalizer" />
        <treeselect v-else :style="style" v-model="queryParams[item.FIELD_NAME + '_ID']" :options="specialityTreeList"
          label placeholder="请选择" :disable-branch-nodes="true" @select="onChangeTap1($event, item.FIELD_NAME)"
          :disabled="disabledType" @input="treeSelectInput1($event, item.FIELD_NAME)" @keyup.enter.native="handleQuery"  :normalizer="normalizer"/>
      </template>
    </div>
    <el-input type="textarea" v-model="queryParams[item.FIELD_NAME]"
      :style="typeInput ? 'width:' + item.COL_WIDTH + 'px' : 'width: 300px'" v-else-if="item.SHOWTYPE == 9"
      @keyup.enter.native="handleQuery" @change="onChangeTap" :disabled="disabledType"></el-input>
  </div>
  <!-- 高级检索  end -->
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deptTreeNoDateScope } from "@/api/system/user";
import { getDicts_archive } from '@/api/archive/dict/dictManageData'
import { getusertree } from "@/api/archive/archivalAppraisal/openness/openArchivesAppraisal"
import { getZyTree } from "@/api/stage/stageManagement/professionalComparison";

export default {
  components: {
    Treeselect,
    listVav: ""
  },
  props: ["item", "inputParams", "inputType", "disabledType", 'listFrom', 'sourceType', 'typeInput', 'isType'],
  watch: {
    item: {
      handler(vav) {
        console.log(vav, "测试")
        if (vav.COL_WIDTH <= 240) {
          vav.COL_WIDTH = "240"
        } else {
          vav.COL_WIDTH = "678"
        }
        if (this.$store.getters.size == 'small') {
          // :style="typeInput?'width:'+item.DATA_LENGTH+'px':'width: 240px'"
          if (this.isType == 'senior') {
            this.style = 'width:100%; height: 32px; line-height: 32px; font-size: 12px'
          } else {
            this.style = 'width: 240px; height: 32px; line-height: 32px; font-size: 12px'
          }
          this.isStyle = true
        } else {
          if (this.isType == 'senior') {
            this.style = 'width:100%; height: 36px; line-height: 36px; font-size: 14px'
          } else {
            this.style = 'width: 240px; height: 36px; line-height: 36px; font-size: 14px'
          }
          this.isStyle = false
        }
        this.listVav = vav;
        getDicts_archive(vav.FIELD_NAME).then(res => {
          this.dictList = res.data
        }).catch(error => {
        })

        //树结构的下拉框
        switch (vav.SHOWTYPE) {
          case 7:// 7=部门（单选）
            // 执行代码块 1
            this.deptTreeSelectPost();
            break;
          case 8: //8=人员（单选
            // 执行代码块 2
            this.getusertreeList();
            break;
          case 10: // 10=专业
            this.getSpecialityTree();
            break;
          default:
          // 与 case 1 和 case 2 不同时执行的代码
        }

      },
      immediate: true,
      deep: true
    },
    inputParams: {  //修改添加获取的参数
      handler(vav) {
        if (vav == undefined) {
          this.queryParams = {} //添加时没有参数显示{}
        } else if (vav.length <= 0) {
          this.queryParams = {} //搜索时点击重置{}
        } else {
          //修改进入的时候日期后端返回来是int 类型，前端需要改成string类型显示页面
          if (this.inputType != "1") {
            for (var i in vav) {
              if (i == "RQ" || i == "TYPE") {
                console.log(typeof (vav[i]), i, vav[i], "liu")
                if (vav[i] != null) {
                  vav[i] = vav[i].toString();
                }

              }
            }
          }

          this.queryParams = vav; //修改有参数赋值参数渲染到输入框里面
        }

      },
      immediate: true
    }
  },


  data() {
    return {
      isStyle: "",
      queryParams: {},
      itemData: "",
      optionSelect: [],
      userTreeList: [],
      specialityTreeList: [], //专业树
      isList: [
        {
          value: "是",
          lable: 1
        }, {
          value: "否",
          lable: 0
        }
      ],
      dictList: [],
      //el-date-picker禁止选取未来年份
      pickerOptions: {
        disabledDate(time) {
          // 获取当前时间
          const today = new Date();
          //  比较日期，将未来的年份禁用
          return time.getFullYear() > today.getFullYear();
        }
      },
      style: ""

    }
  },
  created() {

  },
  mounted() {


  },
  computed() {


  },
  methods: {
     // 只能选择数据下面有children 的数据，没有children的时候禁用
     normalizer(node) {
            if (node.children == null || node.children == undefined || !node.children.length) {
                delete node.children;
            }
            return node
        },

    handleQuery() {
      console.log('回车')
      this.$emit("handleQuery")
    },
    handleOpen() {
      const treeselectMenus = document.querySelectorAll('.vue-treeselect__menu-container');
      treeselectMenus.forEach((treeselectMenu) => {
        // 根据需要更新样式
        if (this.$store.getters.size == 'small') {
          treeselectMenu.style.fontSize = '12px';
          treeselectMenu.style.height = '32px';
          treeselectMenu.style['line-height'] = '32px';
        } else {
          treeselectMenu.style.fontSize = '14px';
          treeselectMenu.style.height = '36px';
          treeselectMenu.style['line-height'] = '36px';
        }
      });
    },

    // 选中触发（第一次回显的时候会触发，清除值的时候会触发, value值为undefined） input事件用于v-model双向绑定组件更新父组件值
    treeSelectInput(val, inputVal) {
      // console.log(val, inputVal, 'input事件')
      if (val == undefined) {
        this.queryParams[inputVal] = null
        this.queryParams[inputVal + "_ID"] = null
      }
      this.$emit("onChangeTap", this.queryParams)
      // console.log(this.value, 'this.value -- input') // 这个不需要 延迟
    },
    treeSelectInput1(val, inputVal) {
      if (val == undefined) {
        this.queryParams[inputVal] = null
        this.queryParams[inputVal + "_CODE"] = null
        this.queryParams[inputVal + "_ID"] = null
      }
      this.$emit("onChangeTap", this.queryParams)
    },
    // // 选中触发（清除值的时候不会触发）
    // treeSelectChange(raw, instanceId) {
    //   console.log(raw, '当前的对象')
    //   setTimeout(() => { // 如果用到this.value 需要setTimeout延迟一下拿到最新的值
    //     console.log(this.value, 'this.value -- select')
    //   })
    // },
    onChangeTap(val) {
      // console.log(this.queryParams, "++")
      this.$emit("onChangeTap", this.queryParams)
    },
    onChangeTap1(val, inputVal) {
      this.queryParams[inputVal] = val.label;
      this.$emit("onChangeTap", this.queryParams)
      // console.log(val, inputVal, this.queryParams, "++++++++++++++++++")
    },
    onChangeTap2(val, inputVal) {
      this.queryParams[inputVal] = val.label;
      this.queryParams[inputVal + "_CODE"] = val.code;
      this.$emit("onChangeTap", this.queryParams)
      // console.log(val, inputVal, this.queryParams, "++++++++++++++++++")
    },
    // 移除选项时触发 当设置multiple为true时生效  raw为当前移除的对象
    treeSelectDeselect(raw, instanceId) {
      // console.log(raw, 'deselect-->>')
    },
    // 搜索
    treeSelectSearch(searchQuery, instanceId) {
      // console.log(searchQuery, '当前搜索的值')
    },
    // 展开触发
    treeSelectOpen(instanceId) {
      // console.log('展开了')
    },
    // 关闭触发
    treeSelectClose(val, inputVal) {
      // console.log(value, '当前的value值')
      // this.queryParams[inputVal] = val.label;
      // this.queryParams[inputVal + "_ID"] = val.id;
      // console.log(val, inputVal, this.queryParams, "++++++++++++++++++")
    },


    //部门（单选）
    deptTreeSelectPost() {
      deptTreeNoDateScope().then(response => {
        this.optionSelect = response.data;
      })
    },


    //人员 （单选）
    getusertreeList() {
      getusertree().then(res => {
        // console.log(res, "sdlkfjkl")
        this.userTreeList = res.data;
      })
    },

    getSpecialityTree() {
      getZyTree().then(response => {
        this.specialityTreeList = response.data
      })
    },


    //日期年度
    onChangeTapND(val, inputVal) {

      this.queryParams[inputVal] = [this.queryParams.ND_start, this.queryParams.ND_end]

      // console.log(val, inputVal, this.queryParams, "_______________________")
    },

  },

}
</script>

<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

::v-deep input[type="number"] {
  -moz-appearance: textfield;
}

.vue-treeselect__control {
    height: inherit;
}

 .vue-treeselect__placeholder,
.vue-treeselect__single-value {
    line-height: inherit;
}







</style>
